<template>
  <view>
    <view class="atitle">外观颜色</view>
    <view class="model-list">
      <view
        :class="{ active: currentWaiguan.id === item.id }"
        class="model-item"
        v-for="(item, index) in waiguanColorList"
        :key="index"
        @click="waiguanClick(item)"
      >
        <text class="name">{{ item.name }}</text>
      </view>
    </view>
    <view class="custom-model-txt" @click="customModelClick">自定义颜色</view>
    <!-- 内饰 -->
    <uni-popup ref="neishiPop" type="right" @maskClick="currentWaiguan = {}">
      <view class="neishi">
        <view class="atitle">外观颜色</view>
        <view class="model-list">
          <view
            :class="{ active: current }"
            class="model-item"
            v-for="(item, index) in neishiColorList"
            :key="index"
            @click="neishiClick(item)"
          >
            <text class="name">{{ item.name }}</text>
            <text class="price" v-if="item.guide_price"
              >{{ item.guide_price }}万</text
            >
          </view>
        </view>
        <view class="custom-model-txt" @click="customModelClick"
          >自定义颜色</view
        >
      </view>
    </uni-popup>
    <!-- 自定义颜色 -->
    <uni-popup ref="popup" type="bottom">
      <view class="custom-model">
        <view class="c-title">自定义颜色</view>
        <view class="c-content">
          <input
            v-if="state === 1"
            :adjust-position="false"
            @blur="keyboardHeight = 0"
            :cursorSpacing="20"
            type="text"
            placeholder="请输入自定义颜色"
            v-model="customWaiguan"
          />
          <input
            v-if="state === 2"
            :adjust-position="false"
            @blur="keyboardHeight = 0"
            :cursorSpacing="20"
            type="text"
            placeholder="请输入自定义颜色"
            v-model="customNeishi"
          />
          <view class="confirm-btn" @click="confirm">确定</view>
        </view>
      </view>
      <view :style="{ height: keyboardHeight + 'px' }"></view>
    </uni-popup>
  </view>
</template>

<script>
import { usedSearchColour, vehicleColor } from "@/api/newCarSerach.js";
export default {
  data() {
    return {
      keyboardHeight: 0,
      currentWaiguan: {},
      currenNeishi: {},
      model_id: "",
      state: 1,
      waiguanColorList: [],
      neishiColorList: [],
      customWaiguan: "",
      customNeishi: "",
      inputFocus: false,
      type: "", // 'custom'自定义车型
    };
  },
  onLoad(option) {
    this.model_id = option.model_id;
    this.type = option.type;
    this.init();
  },
  onShow() {
    uni.onKeyboardHeightChange((res) => {
      this.keyboardHeight = res.height;
    });
  },
  methods: {
    init() {
      if (this.type !== "custom") {
        //选的特定车型
        usedSearchColour(this.model_id, this.state).then((res) => {
          if (this.state === 1) {
            this.waiguanColorList = res.data;
          } else if (this.state === 2) {
            this.neishiColorList = res.data;
          }
        });
      } else {
        //自定义车型
        vehicleColor(this.state + "").then((res) => {
          if (this.state === 1) {
            this.waiguanColorList = res.data;
          } else if (this.state === 2) {
            this.neishiColorList = res.data;
          }
        });
      }
    },
    // 点击外观
    waiguanClick(item) {
      this.currentWaiguan = item;
      this.state = 2;
      this.init();
      this.$refs.neishiPop.open();
    },
    neishiClick(item) {
      this.currenNeishi = item;
      var pages = getCurrentPages();
      var prevPage = pages[pages.length - 2];
      prevPage.$vm.backData({
        type: "color",
        data: {
          appearance: this.currentWaiguan,
          interior: this.currenNeishi,
        },
      });
      uni.navigateBack({
        delta: 1,
      });
    },
    // 自定义颜色
    customModelClick() {
      this.$refs.popup.open();
      this.inputFocus = true;
    },
    confirm() {
      this.currentWaiguan = {
        name: this.customWaiguan,
      };
      this.currenNeishi = {
        name: this.customNeishi,
      };
      if (this.state === 1) {
        if (this.customWaiguan) {
          this.state = 2;
          this.$refs.popup.close();
          this.$refs.neishiPop.open();
          this.init();
          this.inputFocus = true;
        } else {
          uni.showToast({
            title: "请输入自定义颜色",
            icon: "none",
          });
        }
      } else {
        if (this.customNeishi) {
          var pages = getCurrentPages();
          var prevPage = pages[pages.length - 2];
          prevPage.$vm.backData({
            type: "color",
            data: {
              appearance: this.currentWaiguan,
              interior: this.currenNeishi,
            },
          });
          uni.navigateBack({
            delta: 1,
          });
        } else {
          uni.showToast({
            title: "请输入自定义颜色",
            icon: "none",
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.atitle {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  padding: 15rpx 25rpx;
}
.model-list {
  .model-item {
    background-color: #fff;
    padding: 29rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #e6e6e6;
    &:last-child {
      // border-bottom: none;
    }
    &.active {
      background-color: #e6e6e6;
      text {
        color: #0e59ea !important;
      }
    }
    .name {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #000000;
    }
    .price {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
      white-space: nowrap;
    }
  }
}
.custom-model-txt {
  background-color: #fff;
  padding: 29rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
}
.custom-model {
  background-color: #fff;
  padding: 40rpx 28rpx;
  .c-title {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 800;
    color: #000000;
    text-align: center;
  }
  .c-content {
    margin-top: 34rpx;
    display: flex;
    align-items: center;
    input {
      padding: 0 12rpx;
      flex: 1;
      height: 92rpx;
      background: #f3f3f3;
      border-radius: 14rpx;
    }
    view {
      margin-left: 23rpx;
      width: 173rpx;
      height: 92rpx;
      line-height: 92rpx;
      background: #0e59ea;
      border-radius: 14rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
    }
  }
}
.neishi {
  width: 550rpx;
  height: 100%;
  background-color: #fff;
}
</style>
